<template>
	<view class="lr">
		<u-toast ref="uToast"></u-toast>
			<view class="title">
				{{title}}
			</view>
		
			<!-- 登录 -->
			<view class="login">
				<u--input
					v-model="account"
				    placeholder="账号"
				    prefixIcon="account"
						class="uInput"
				    prefixIconStyle="font-size: 22px;color: #909399"
				></u--input>
				<u--input
					v-model='password'
				    placeholder="密码"
					password
				    prefixIcon="lock"
				    prefixIconStyle="font-size: 22px;color: #909399"
					class="uInput"
				></u--input>
				<view style="color: red;" v-show="showTips">
					两次密码不一致
				</view>
			</view>
			
			
			<!-- 注册 -->
			<view class="register"  v-show="title==='注册'">
					<u--input
						v-model='password2'
					    placeholder="请再次输入密码"
					    prefixIcon="lock"
						password
					    prefixIconStyle="font-size: 22px;color: #909399"
						class="uInput"
					></u--input>
					<u--input
						v-model='age'
					    placeholder="年龄"
					    type="number"
						
					    prefixIconStyle="font-size: 22px;color: #909399"
						class="uInput"
					></u--input>
					  <view class="uRadio">
					  	<view class="uRadio-group">
					  		<u-radio-group
					  		  v-model="sex"
					  			class=""
					  		>
					  		  <u-radio
					  		    :customStyle="{marginBottom: '8px'}"
					  		    v-for="(item, index) in sexList"
					  		    :key="index"
					  		    :label="item.name"
					  		    :name="item.name"
					  		  >
					  		  </u-radio>
					  		</u-radio-group>
					  	</view>
					  </view>
			</view>
				<view class="changeType">
					<view class="" @click="title='登录'">
						登录
					</view>
					<view class="" @click="title='注册'">
						注册
					</view>
				</view>
				
			<view class="submitBtn">
				<u-button text="登录" @click="login" v-show="title==='登录'"></u-button>
				<u-button text="注册" @click="register"   v-show="title==='注册'"></u-button>
			</view>
		
		
	</view>
	
	
</template>

<script>
	import {tokenToUser} from '@/utils/init.js'
	export default {
		data() {
			return {
					title:'登录',
					account:'',
					password:'',
					password2:'',
					sex:'男',
					age:'',
					sexList:[{name:'男'},{name:'女'}],
					showTips:false,
			}
		},
		onLoad() { 
		
		},
		
		methods: {
			async login(){
				var {account,password} =this
				try{
					var res= await this.$myRquest({
						url:'/blientBoxuser/login',
						method:'post',
						data:{
							account,
							password
						}
					})
					
					if(res.data.code==400){
						this.$refs.uToast.show({
										message:'登陆失败！账号或密码错误',
										type:'error',
										duration:1000
										})
					}else{
						
						this.saveUser(res.data.data)
						
					}
					 
				}catch(err){
					
					this.$refs.uToast.show({
									message:'登陆失败！账号或密码错误',
									type:'error',
									duration:1000
									})
				}
					
			},
			async register(){
				var {account,password,sex,age} =this
				console.log(this.passwordIsCurrent())
				if(!this.passwordIsCurrent()) return
				try{
					var res=await this.$myRquest({
						url:'/blientBoxuser/create',
						method:'post',
						data:{
							account,
							password,
							sex,
							age
						}
					})
					if(res.data.code==400){
						this.$refs.uToast.show({
										message:'注册失败！已存在该用户',
										type:'error'
										})
					}else{
						this.$refs.uToast.show({
										message:'注册成功!',
										type:'success',
										duration:1000,
										complete:()=> {
													this.title='登录'
												}
										})
					}
					
				}catch(err){
					this.$refs.uToast.show({
									message:'注册失败！已存在该用户',
									type:'error'
									})
				}
			},
			passwordIsCurrent(){
			this.showTips=false
			if(this.ifEmpty()) return false
			
			var {password,password2} =this
				console.log(password,password2)
			if(password===password2){
				return true
			}
			this.showTips=true
			return false
			},
			//判断是否填写完整
			ifEmpty(){
				var {account,password,sex,age}=this
				if(account&&password&&sex&&age){
					return false
				}
				this.$refs.uToast.show({
								message:'请将信息填写完整！',
								type:'error'
								})
				return true
			},
			saveUser(res){
				
				var {token} =res
					
					
				uni.setStorage({ //将token 存 缓存 防止用户刷新vuex中的token 丢失
					key:'token',
					data:token
				})
				
				this.$store.commit('user/SET_TOKEN',token) //登录时将token存vuex	
			
				tokenToUser()//使用token换取user信息并存vuex中
				this.$store.dispatch('chat/getChatObjectList')//获取所有聊天的对象列表		
				this.$refs.uToast.show({
								message:'登陆成功',
								type:'success',
								duration:1000						
								})
							
				uni.switchTab({
  			    url: '/pages/home/index'
				});			
			}
		},
		
	}
	
	
</script>

<style scoped lang="scss">
	.lr{
		width: 100%;
		padding-top: 20vh;

		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.uInput{
		width: 100%;
		margin: 20rpx auto;
	}
	.title{
			width:400rpx;
			font-size: 50rpx;
			text-align: center;
	}
	.login{
				
				width:400rpx;
	}
	.changeType{
		width:400rpx;
		display: flex;
		justify-content: space-between;
		margin: 10rpx 0;
		view{
			color: green;
			
		}
	}
	.register{
		width:400rpx
	}
	.uRadio{	
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.u-radio-group{
		width: 400rpx !important;
	}
	.submitBtn{
		width: 400rpx;
	}
</style>
